<template>
  <div>
    <div class="container main">
      <div class="posid"><p>惠企政策>活动报名</p></div>
      <div class="project-requirement">
        <div class="project-title">
          <h2>
            《新形势下企业财税管控》讲座报名
          </h2>
          <div class="active-msg">
            <div>活动时间：2011-04-10 14：00~17：30</div>
            <div>报名时间：2011-04-10 14：00~17：30</div>
            <div>活动地址：福建省厦门市湖里区湖里大道33号西侧</div>
          </div>
        </div>
        <div class="active-reg">
          <span >
            常用联系人
          </span>
           <div class="add-person">
             <span>张某某</span><span @click="addList">+添加新成员</span>
           </div>
          <div>
            <el-tabs v-model="activeName">
              <el-tab-pane label="报名人" name="first"></el-tab-pane>
            </el-tabs>
            <div class="button-center">
              <ul>
                <li v-for="(menber,index) in groups">
                  <el-row :gutter="20">
                    <el-col :span="6"><el-input v-model="menber.name" placeholder="姓名"></el-input></el-col>
                    <el-col :span="6"><el-input v-model="menber.tel" placeholder="电话"></el-input></el-col>
                    <el-col :span="6"><el-input v-model="menber.company" placeholder="公司/机构"></el-input></el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="6"><el-input v-model="menber.position" placeholder="职务"></el-input></el-col>
                    <el-col :span="6">
                      <el-select v-model="menber.sex" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select></el-col>
                    <el-col :span="6"><el-input v-model="menber.department" placeholder="部门"></el-input></el-col>
                    <el-col :span="6"><el-button type="danger" icon="el-icon-delete" circle @click="deleteList(index)"></el-button></el-col>
                  </el-row>
                  <el-divider></el-divider>
                </li>
              </ul>
              <el-button type="primary">提交报名</el-button>
            </div>
          </div>
        </div>




      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ActiveEnrollment",
    data(){
      return{
        sum:1,
        input:'',
        activeName:"first",
        value:'2',
        groups:[{name:'',sex:'2',tel:'',company:'',position:'',department:''}],
        options: [{
          value: '2',
          label: '男'
        }, {
          value: '1',
          label: '女'
        }],
      }
    },
    methods:{
      addList(){
      this.groups.push({name:'',sex:'2',tel:'',company:'',position:'',department:''})
      },
      deleteList(n){
          this.groups.splice(n,1);
      }
    }
  }
</script>

<style scoped>
  .main{
   padding-bottom: 50px;
  }
  .project-requirement{
    width: 998px;
    margin: 30px auto 0;
  }
  .project-title{
    background: #ffffff;
    text-align: center;
    padding: 30px 0;
    margin-bottom: 35px;
  }
  .active-reg{
    background: #ffffff;
    padding: 50px 60px;
    margin-bottom: 35px;
  }
  .active-msg{
    display: inline-block;
    width: auto;
    text-align: left;
    margin: 0 auto;
  }
  .add-person{
    margin: 30px auto;
  }
.add-person span{
  display: inline-block;
  border:2px solid rgba(21,117,249,1);
  border-radius:2px;
  padding: 10px 14px;
  margin-right: 30px;
}
  .el-row {
    margin-bottom: 30px;

  }
  .button-center{
    margin: 30px auto;
    text-align: center;
  }
</style>
